<template>
  <div class="remote-control j-main-box">
    <main-left @change="change"/>
    <div class="right">
      <div class="top">
        <p class="title">远程控制</p>
        <div class="item" v-for="(item,index) in equipList" :key="index">
          <div class="head">
            <span>{{ item.equipName }}</span>
            <span>状态：{{  item.statusCode || '--'}}</span>
            <span>剩余试剂量：{{ item.leftStatus || '--' }}</span>
            <span>时间：{{ item.dataTime || '--' }}</span>
          </div>
          <div class="body">
            <div class="left">
              <el-button plain  size="mini" @click="handle(item,v)"
              :type="v.type" v-for="v in list" :key="v.id">
                {{ v.name }} 
              </el-button>
            </div>
            <div class="right">
               选择模式：
              <el-radio-group v-model="radio">
                <el-radio :label="3">远程控制监测模式</el-radio>
                <el-radio :label="6">手动监测模式</el-radio>
              </el-radio-group>
            </div>
          </div>
        </div>
      </div>
      <div class="bottom">
        <p class="title">操作日志</p>
        <main-table
          height="300px"
          ref="table"
          :loading="loading"
          :pageTotal="pageTotal"
          :data="tableData"
          :columns="columns"
          :currentPage.sync="pageNum"
          :columnType="columnType"
          border>
        </main-table>
      </div>
    </div>
  </div>
</template>

<script>
import MainLeft from '../equip-status/components/left';
export default {
  components: {
    MainLeft
  },
  data() {
    return {
      point: {},
      pointCode: '',
      equipList: [],
      radio: 3,
      list: [
        { name: '停止', id: 'STOP', type: 'danger' },
        { name: '标液核查', id: 'STANCOR', type: 'success' },
        { name: '测试水样', id: 'BEGINTEST', type: 'primary' },
        { name: '清洗', id: 'WASH', type: 'warning' },
        { name: '校时', id: 'TIMECOR', type: 'info' }
      ],
      pageTotal: 0,
      loading: false,
      columnType: ['index'],
      columns: [
        { label: '设备名称', prop: 'equipName' },
        { label: '命令项', prop: 'cmdType' },
        { label: '操作时间', prop: 'creatTime' },
        { label: '操作人', prop: 'userName' },
        { label: '操作状态', prop: 'statusName' }

      ],
      multipleSelection: [],
      tableData: [],
      pageNum: 1,
      pageSize: 20
    };
  },
  methods: {
    change(item) {
      this.point = item;
      this.pointCode = item.pointCode;
      this.getEquipList();
      this.getDataList();
    },
    handle(a, b) {
      console.log(a, b);
      this.submit(a, b);
    },
    submit(a, b) {
      const params = {
        url: `/api/ems/equipment/control/excute`,
        type: 'post',
        params: {
          cmdType: b.id,
          polluteCode: a.polluteCode,
          equipCode: a.equipCode,
          pointCode: this.pointCode,
          qnCode: ''
        }
      };
      this.$ajax(params).then(resp => {
        const { result, message } = resp;
        if (result) {
          this.$message({
            message,
            type: 'success'
          });
          this.getDataList();
        } else {
          this.$message.error(message);
        }
      });
    },
    getDataList() {
      const params = {
        url: `/api/ems/equipment/control/log/list`,
        type: 'post',
        params: {
          page: 1,
          rows: 20,
          pointCode: this.pointCode
        }
      };
      this.$ajax(params).then(resp => {
        const { result, rows } = resp;
        if (result) {
          this.tableData = rows;
          console.log(this.tableData);
        }
      });
    },
    getEquipList() {
      const params = {
        url: `/api/ems/equipment/status/list`,
        type: 'post',
        params: {
          systemType: 21,
          searchType: 1,
          pointCode: this.pointCode
        }
      };
      this.$ajax(params).then(resp => {
        const { result, rows } = resp;
        if (result) {
          this.equipList = rows;
        }
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.remote-control{
  height: 100%;
  display: flex;
  &>.right{
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
  }
  .top{
    flex: 1;
  }
  .bottom{
    height: 300px;
    // background: red;
  }
  .item{
    height: 100px;
    margin: 10px;
    border: 1px solid #edf5f0;
    box-sizing: border-box;
    margin-left: 0;

    .head{
      font-size: 15px;
      background: #eef7f1;
      height: 35px;
      line-height: 35px;
      &>span{
        margin-right:50px;
      }
    }
    .body{
      display: flex;
      align-items: center;
      height: 65px;
      .left,.right{
        padding-left: 20px;
      }
    }
  }
}
</style>